<template>
  <div class="List" @click="get(item)">
    <div class="Lpic">
      <img :src="'bimg/'+item.pic" />
    </div>

    <div class="Lcenter">
      <p class="showtop">{{item.title}}</p>
      <p class="showmain">{{item.ather}}</p>
      <p class="showmain">{{item.category}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "bookshow",
  props: {
    msg: String,
    item: "",
    bookbox:[]
  },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    get(item) {
      localStorage.setItem("bookbox", JSON.stringify(item));
      // this.bookbox.push(item)
      // localStorage.setItem("bookbox", JSON.stringify(this.bookbox));
      this.$router.push('/Details')
      console.log('1')
       var book = JSON.parse(localStorage.getItem("lsbook")) || [];
        console.log(book)
        if (book.length == 0) {
          book.push(this.item);
          localStorage.setItem("lsbook", JSON.stringify(book));
        } else {
          book.push(this.item);

          // function unique(arr) {
          //   return Array.from(new Set(arr));
          // }
          function getUnique2(arr) {
            const map = {};
            // 1、把数组元素作为对象的键存起来（这样就算有重复的元素，也会相互替换掉）
            arr.forEach(
              (item) =>
                (map[
                  JSON.stringify(item, [
                    "ather",
                    "category",
                    "chapter",
                    "main",
                    "pic",
                    "score",
                    "state",
                    "title",
                    "zj",
                  ])
                ] = item)
            );

            // 2、再把新对象的键名抽成一个数组返回即为不重复的集合
            return Object.keys(map).map((key) => JSON.parse(key));
          }
          book = getUnique2(book);
          localStorage.setItem("lsbook", JSON.stringify(book));
        }
        localStorage.setItem("bookboxs", JSON.stringify(this.bookbox));
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.bList,
.List {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 0.01rem solid rgb(209, 201, 201);
}
.List img {
  height: 3rem;
  width: 80%;
  margin-left: 0.1rem;
}

.Lpic {
  display: flex;
  width: 30%;
  flex-direction: column;
}

.Lcenter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 60%;
}

.Licon {
  align-self: center;
}
.showtop {
  font-size: 0.4rem;
  font-weight: 600;
}
.showmain {
  color: rgb(94, 79, 79, 0.6);
  font-size: 0.3rem;
  font-weight: 500;
}
</style>